<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="车辆照片代码:" prop="pictureNo">
          <el-input
            v-model="formModel.pictureNo"
            class="filter-item filter-200"
            clearable
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" plain @click="queryList">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <hey-table ref="table" :columns="columns" :auto-width="false" @row-click="handleRowClick" :is-radio="true">

    </hey-table>
    <div class="imageDiv" v-if="showImage">
      <h3>照片预览:</h3>
      <img class="image" :src="imageSrc" style="width:30%;height:30%">
    </div>
    <el-row class="submit-area">
      <el-col :span="24">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'VehiclePhotosDialog',
  components: {

  },
  props: {},
  data() {
    return {
      choseData:{},
      imageSrc:'',
      showImage:false,
      formModel: {
        isDelete: '0',
        pictureNo: '',
      },
      columns: [
        { title: '车辆照片代码', key: 'pictureNo' },
        { title: '创建时间', key: 'createTime' },
        { title: '创建人', key: 'createUsername' },
        { title: '最后修改时间', key: 'lastUpdateTime'},
        { title: '最后修改人', key: 'lastUpdateUsername' },
      ]
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    handleRowClick(row) {
      if (row) {
        this.choseData = row
        this.showImage = true
        this.imageSrc = 'data:image/jpeg;base64,'+row.picture
      } else {
        this.choseData = {}
        this.showImage = false
        this.imageSrc = ''
      }
    },
    queryList() {
      this.$refs.table.query('/tmBasPhotos/queryTmBasPhotos', this.formModel, '', false)
    },
    handleSubmit() {
      if(Object.keys(this.choseData).length==0){
        this.$warn('请单击选中一条数据!')
        return false
      }
      this.$emit('queryPictureNoSuc', this.choseData)
      this.closeDialog()
    },
    closeDialog() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
  .imageDiv{
    padding-top:20px;
  }
  .image{
    padding-top:10px;
  }
</style>
